<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>云原生数据库TeleDB for OpenGauss</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          云原生数据库TeleDB for
          openGauss版是一款高性能，高安全，高可用的企业级关系型数据库，面向企业复杂SQL的OLTP/OLAP业务场景，具备SQL规范的完整实现以及丰富多样的数据类型支持，高度兼容Oracle语法。此外还集成了可视化监控告警、慢SQL诊断和备份恢复等一系列重要的运维管理功能，减轻您的运维压力。
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div class="flex-grid mt-20 mb-20">
          <div class="list-box" v-for="(item, index) in list" :key="index">
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <!--<div class="scene-list flex-grid">-->
        <!--<div class="list" v-for="(item,index) in sceneList" :key="index">-->
        <!--<span class="text-center"><img :src="item.iconUrl" alt=""></span>-->
        <!--<span class="mb-10">{{item.name}}</span>-->
        <!--<span class="fs-12">{{item.label}}</span>-->
        <!--</div>-->
        <!--</div>-->
        <div class="scene-list2">
          <div class="list" v-for="(item, index) in sceneList" :key="index">
            <span class="icon"><img :src="item.iconUrl" alt="" /></span>
            <dl>
              <dt>{{ item.name }}</dt>
              <dd>{{ item.label }}</dd>
            </dl>
          </div>
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="mt-20 bor text-center">
          <img :src="frameworkImg" width="600px" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav2',
  data () {
    return {
      list: [
        {
          name: '高性能',
          label:
            '强大的计算能力以及空间地理信息处理能力，2路鲲鹏性能高达150万TPMC。'
        },
        {
          name: '高可用',
          label: '可用性SLA 99.99%，故障秒级切换保障业务连续可用。'
        },
        {
          name: '安全可靠',
          label:
            '提供备份恢复功能以及高可用架构，主备支持异步、半同步(大多数场合RPO=0,可用性不受损)、全同步三种同步模式。'
        },
        {
          name: '高安全',
          label:
            '细粒度访问控制、多维度审计，全方位的数据保护，包括存储、传输、导出加密以及动态脱敏等。'
        },
        {
          name: '支持广泛的数据类型',
          label:
            '支持大多数的SQL标准数据类型，json,空间，几何及自定义数据类型。'
        },
        {
          name: 'SQL标准良好支持',
          label:
            '支持ANSI/ISO标准SQL92、SQL99和SQL2003等大部分SQL标准，支持复杂SQL查询，子查询、窗口函数、统计函数、视图、存储过程等。'
        },
        {
          name: '易运维',
          label:
            '覆盖生命周期管理（创建实例、变配、释放、HA、备份、监控、恢复、账号、数据库管理、等），通过运维管理平台简捷管理集群。'
        }
      ],
      sceneList: [
        {
          iconUrl: require('../../assets/images/icon/ico-r3-001.png'),
          name: '物联网行业',
          label:
            '可以在SQL中完成JSON数据类型及GIS地理信息数据类型的存储和计算，这些都是IoT业务处理的必备手段。'
        },
        {
          iconUrl: require('../../assets/images/icon/ico-r3-002.png'),
          name: '位置应用系统',
          label:
            '支持PostGIS插件，提供空间信息服务功能：空间对象、空间索引、空间操作函数和空间操作符，非常适合位置应用类产品。'
        },
        {
          iconUrl: require('../../assets/images/icon/ico-r3-003.png'),
          name: '金融保险系统',
          label:
            '使用多版本并发控制（MVCC），主备实例数据同步复制，确保数据的一致性和不丢失，配合两地三中心的异地多活方案，适合数据可用性和可靠性安全高的金融行业。'
        }
      ],
      frameworkImg: require('../../assets/images/pic/img-2.png')
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
</style>
